import BaseRenderer from "diagram-js/lib/draw/BaseRenderer"; // 引入默认的renderer
import { customElements, customConfig } from "../utils/util";
import { append as svgAppend, attr as svgAttr, create as svgCreate } from "tiny-svg";

const HIGH_PRIORITY = 1500; // 最高优先级
export default class CustomRenderer extends BaseRenderer {
	// 继承BaseRenderer
	constructor(eventBus, bpmnRenderer) {
		super(eventBus, HIGH_PRIORITY);
		this.bpmnRenderer = bpmnRenderer;
	}
	canRender(element) {
		// ignore labels
		return !element.labelTarget;
	}
	// 图形
	drawShape(parentNode, element) {
		// 核心函数就是绘制shape
		const type = element.type; // 获取到类型
		if (customElements.includes(type)) {
			// or customConfig[type]
			const { url, attr } = customConfig[type];
			const customIcon = svgCreate("image", { ...attr, href: url });
			element["width"] = attr.width; // 这里我是取了巧, 直接修改了元素的宽高
			element["height"] = attr.height;
			svgAppend(parentNode, customIcon);
			return customIcon;
		}
		const shape = this.bpmnRenderer.drawShape(parentNode, element);
		return shape;
	}

	// getShapePath(shape) {
	//     return this.bpmnRenderer.getShapePath(shape)
	// }
	// 线
	drawConnection(parentNode, element) {
		const shape = this.bpmnRenderer.drawConnection(parentNode, element);
		shape.style.stroke = "red";
		return shape;
	}
}

CustomRenderer.$inject = ["eventBus", "bpmnRenderer"];
